var dom = document.getElementById("right_chart2");
var xdrightChart2 = echarts.init(dom,'macarons');
var app = {};
option = null;

// var xData = [
//     [
//         60,80,45,65,55,65,92,52,74,82,65,83,72,90,55,75,54,57,98,58,89,58,92,82,67,100,70,92,72,83,68,55,64,60,83,64,99,77,82,80,75,93,85,62,76,56,96,
//         58,92,82,67,100,75,93,85,70,92,72,83,68,55,64,60,83,64,99,77,60,80,45,65,55,65,92,52,74,82,65,83,72,90,82,80,55,75,54,57,98,58,89,62,76,56,96
//     ],[],[],[]
// ];
var xData = [[],[],[],[]];
function makedata(x){
    if(x===0){
        for (var i=0;i<2000;i++){
            xData[0].push(Math.random()*20+80);
        }
    }else {
        var data = xData[0];
        for (var i = 0;i<data.length;i++){
            var tmp = 0;
            if(x===1){
                tmp = data[i]-30;
            }else if(x===2){
                tmp = data[i]-20;
            }else{
                tmp = data[i]-10;
            }
            xData[x].push(tmp);
        }
    }

    return xData[x];
}

option = {
    // backgroundColor:'rgba(255, 255, 255, 0.9)', //设置无背景色
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        // formatter: function (params) {
        //     params = params[0];
        //     var date = new Date(params.name);
        //     return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        // },
        axisPointer: {
            animation: false
        }
    },
    color:['#00ffba','#feff8c','#fe72ff','#00ffff'],
    legend:[
        {

            x:'center',
            top:'1%',
            itemGap: 30,
            data:['北京','成都','三亚','喀什'],
            textStyle:{
                color:'#fff',
                fontSize:40
            }
        }
    ],
    grid: {
        left: '50',
        right: '80',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
            "2018-01-01",
            "2018-01-02",
            "2018-01-03",
            "2018-01-04",
            "2018-01-05",
            "2018-01-06",
            "2018-01-07",
            "2018-01-08",
            "2018-01-09",
            "2018-01-10",
            "2018-01-11",
            "2018-01-12",
            "2018-01-13",
            "2018-01-14",
            "2018-01-15",
            "2018-01-16",
            "2018-01-17",
            "2018-01-18",
            "2018-01-19",
            "2018-01-20",
            "2018-01-21",
            "2018-01-22",
            "2018-01-23",
            "2018-01-24",
            "2018-01-25",
            "2018-01-26",
            "2018-01-27",
            "2018-01-28",
            "2018-01-29",
            "2018-01-30",
            "2018-01-31",
            "2018-02-01",
            "2018-02-02",
            "2018-02-03",
            "2018-02-04",
            "2018-02-05",
            "2018-02-06",
            "2018-02-07",
            "2018-02-08",
            "2018-02-09",
            "2018-02-10",
            "2018-02-11",
            "2018-02-12",
        ],
        axisLabel:{
            show:true,
            textStyle: {
                color: '#fff',
                fontSize:40
            }

        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5
            }
        }

    },
    yAxis: {
        name:'(%)',
        type: 'value',
        nameTextStyle:{
            color:"#fff",
            fontSize:40
        },
        min:0,
        max:100,
        interval:10,
        axisLabel: {
            show: true,
            // interval: 'auto',
            textStyle: {
                color: '#fff',
                fontSize:40
            }
        },
        show: true,
        splitLine:{
            show:false
        },
        axisLine:{
            lineStyle:{
                color: '#56f0ed',
                width:5

            }
        }
    },
    series: [
        {
            name:'北京',
            type:'line',
            // symbol: 'circle',
            // symbolSize: 20,
            smooth:false,
            lineStyle:{
                width:5
            },
            areaStyle: {
                //color:'#00ffff'
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(0, 255, 186,0.9)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(0, 255, 186, 0)'
                    }

                ])
            },

            //stack: '总量',
            data:makedata(0)
        },
        {
            name:'成都',
            type:'line',
            // symbol: 'circle',
            // symbolSize: 20,
            smooth:false,
            lineStyle:{
                width:5
            },
            areaStyle: {
                //color:'#00ffff'
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(254,255,140,0.9)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(254,255,140, 0)'
                    }

                ])
            },
            //stack: '总量',
            data:makedata(1)
        },
        {
            name:'三亚',
            type:'line',
            // symbol: 'circle',
            // symbolSize: 20,
            smooth:false,
            lineStyle:{
                width:5
            },
            areaStyle: {
                //color:'#00ffff'
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(254,114,255,0.9)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(254,114,255, 0)'
                    }

                ])
            },
            //stack: '总量',
            data:makedata(2)
        },
        {
            name:'喀什',
            type:'line',
            // symbol: 'circle',
            // symbolSize: 20,
            smooth:false,
            lineStyle:{
                width:5
            },
            areaStyle: {
                //color:'#00ffff'
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(0,255,255,0.9)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(0,255,255, 0)'
                    }

                ])
            },
            //stack: '总量',
            data:makedata(3)
        }
    ]
};

setInterval(function () {
    var op = xdrightChart2.getOption();
    var data0 = op.series[0].data;
    var data1 = op.series[1].data;
    var data2 = op.series[2].data;
    var data3 = op.series[3].data;

    op.series[0].data.push(data0.shift())
    op.series[1].data.push(data1.shift())
    op.series[2].data.push(data2.shift())
    op.series[3].data.push(data3.shift())

    // data0.shift();
    // data0.push();
    //data1.shift();

    //data2.shift();
    // data1.push();

    //var data2 = op.series[0].data;
    // op.xAxis[0].data.shift();
    // op.xAxis[0].data.push(xAxisdata2);
    // console.log(data0,data1,data2);
    xdrightChart2.setOption(op);
}, 5000);
if (option && typeof option === "object") {
    xdrightChart2.setOption(option, true);
    window.onresize = function () {
        xdrightChart2.resize();
    }
}
